<template>
	<view>
		<image :src="myconfig.sharepics" mode="scaleToFill" style="
		    width: -webkit-fill-available;
		    height: 767px;
		"></image>
		<view style=" margin: 0 auto;
		position: absolute; 
		top: 386px;
    left: 24%;
	width: 53%;">
			<canvas canvas-id="qrcode" style="width: 200px;height: 200px;margin: 0 auto; " />
			<view class="flex  padding justify-center">
				<view class="title">{{i18n.share.InvitationCode}} {{userinfo.tgno}}</view>

			</view>

			<view class="flex padding justify-center">
				<button class='cu-btn bg-yellow round shadow lg' @tap="copy" style="width: 100%;">{{i18n.share.copy}}</button>

			</view>
		</view>



		<!-- <view class="canvas" @click="ViewImage">
			<canvas style="width: 280px; height:400px;" canvas-id="firstCanvas"></canvas>
		</view>
		<view class="imglist">
			<view :style="[{ width:widths+'upx'}]">
				<block v-for="(item,index) in swiperList" :key="index">
					<image @click="selseimg(item)" :src="$tools.isFullUrl(item) ? item : $host+item" mode="aspectFill"></image>
				</block>
			</view>
		</view>-->
		<!-- <view class="flex justify-center">
			<view class="padding radius text-center ">
				<view class="uni-h4">
					<view class="cu-form-group">
						<view class="title">{{i18n.share.InvitationCode}}</view>
						<input :value="userinfo.tgno" disabled="true"></input>
						
					</view>
				</view>
				 
			</view>
		</view> -->
		<!-- #ifndef H5 -->
		<view class="padding flex flex-direction ">
			<button class="cu-btn bg-grey lg" @tap="saveCans(1)">{{i18n.share.SavePoster}}</button>
		</view>
		<!-- #endif -->
		<!-- <view class="padding flex flex-direction ">

			<button class="cu-btn bg-yellow lg" @tap="saveCans(2)">分享海报</button>
		</view> -->

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';

	import uQRCode from '@/common/uqrcode.js'
	var that
	export default {
		data() {
			return {
				widths: "", //图片列表动态宽度
				imgsrc: "", //保存图片的路径
				ma: '',
				imgList: []
				// swiperList: [{
				// 	id: 0,
				// 	name: '小样酸扣糖',
				// 	url: 'http://img3.imgtn.bdimg.com/it/u=1121732771,1817054332&fm=26&gp=0.jpg'
				// }, {
				// 	id: 1,
				// 	name: '旺旺碎冰冰',
				// 	url: 'http://img1.imgtn.bdimg.com/it/u=3317676671,2098880592&fm=26&gp=0.jpg',
				// }, {
				// 	id: 2,
				// 	name: '咱们这个村',
				// 	url: 'http://img5.imgtn.bdimg.com/it/u=3022471729,1504607894&fm=26&gp=0.jpg'
				// }, {
				// 	id: 3,
				// 	name: '咱们这个村',
				// 	url: 'http://img2.imgtn.bdimg.com/it/u=2988118113,3334588401&fm=26&gp=0.jpg'
				// }, {
				// 	id: 5,
				// 	name: '呲牙哥',
				// 	url: 'http://img0.imgtn.bdimg.com/it/u=1996406715,1108825347&fm=26&gp=0.jpg'
				// }, {
				// 	id: 6,
				// 	name: '呵呵呵呵呵呵',
				// 	url: 'http://img.sccnn.com/bimg/339/22088.jpg'
				// }]
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			swiperList() {
				return this.myconfig.sharepics;
			},
			title() {
				return this.myconfig.sharetitle;
			},
			sharesub() {
				return this.myconfig.sharesub;
			},
			sharesub2() {
				return this.myconfig.sharesub2;
			},
			pic() {
				return this.myconfig.logo;
			},
			i18n() {
				return this.$t('message');
			}
		},
		onLoad: function() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
			// uni.setNavigationBarTitle({
			// 	title: this.i18n.share.title
			// });
			that = this;
			this.myConfig().catch(e => {});
			that.make();
			that.widths = 200 * that.swiperList.length + 200;
			// setTimeout(function() {
			// 	that.selseimg(that.swiperList[0].url, that.swiperList[2].name);

			// }, 200);
		},
		onShow() {
			// that.make();
		},
		methods: {
			...mapActions(['myConfig']),
			back() {
				uni.navigateBack()
			},
			make() {

				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.$host + 'index.html#/pages/public/registe?tgno=' + this.userinfo.tgno,
					size: 200,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					success: res => {
						this.ma = res;
						// that.selseimg(that.swiperList[0]);
					}
				})
			},
			selseimg(url) {
				uni.showLoading({
					title: '生成海报中'
				});
				const context = uni.createCanvasContext('firstCanvas')
				url = this.$tools.isFullUrl(url) ? url : this.$host + url;
				context.drawImage(url, 0, 0, 280, 400)
				context.drawImage("/static/infoimg.png", 10, 280, 260, 110)
				context.drawImage(that.ma, 182, 304, 75, 75)

				context.setFillStyle('#333333')
				context.setFontSize(12)
				context.fillText('我的邀请码', 190, 296)
				context.fill()

				context.setFillStyle('#333333')
				context.setFontSize(20)
				context.fillText(this.title, 80, 335)
				context.fill()

				context.setFillStyle('#666666')
				context.setFontSize(12)
				context.fillText(this.sharesub, 80, 355)
				context.fillText(this.sharesub2, 80, 375)
				context.fill()

				context.save()
				context.beginPath()
				context.arc(44, 350, 25, 0, 2 * Math.PI)
				context.clip()

				context.drawImage(this.pic, 17, 322, 55, 55)
				context.restore()
				context.draw()

				uni.hideLoading();
			},
			saveCans(e) {
				uni.showLoading({
					title: '保存海报中'
				});
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					canvasId: 'firstCanvas',
					success: function(res) {
						console.log(res)
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(red) {
								uni.showToast({
									title: '保存相册成功'
								})
								that.imgsrc = res.tempFilePath
								if (e == 2) {
									that.gofenxiang()
								}
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {

													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
			gofenxiang() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: that.imgsrc,
					success: function(res) {
						console.log(JSON.stringify(res));
					},
					fail: function(err) {
						console.log(JSON.stringify(err));
					}
				});
			},
			ViewImage() {
				console.log('vvvv')
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					canvasId: 'firstCanvas',
					success: function(res) {
						console.log(res)
						uni.previewImage({
							urls: [res.tempFilePath]
						});
					},
					fail(res) {
						console.log(res)

					}
				}, this)

			},
			copyTitle(txt) {
				var input = document.createElement("input"); // 创建一个新input标签
				input.setAttribute("readonly", "readonly"); // 设置input标签只读属性
				input.setAttribute("value", txt); // 设置input value值为需要复制的内容
				document.body.appendChild(input); // 添加input标签到页面
				input.select(); // 选中input内容
				input.setSelectionRange(0, 9999); // 设置选中input内容范围
				document.execCommand("copy"); // 复制
				document.body.removeChild(input); // 删除新创建的input标签
				// 只是提示作用。
				this.$api.msg(this.i18n.popup.success)
			},
			copy() {
				// #ifdef H5
				console.log('h5-copy')
				this.copyTitle(this.userinfo.tgno);
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: this.userinfo.tgno,
					success: () => {

						this.$api.msg(this.i18n.popup.success)
					}
				});
				// #endif

			},
		}
	}
</script>

<style>
	.counter {
		position: relative;
		min-height: 1000px;
		width: 100%;
	}

	.canvas {
		display: flex;
		justify-content: center;
	}

	.bottom {
		padding: 20upx 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
	}

	.bottom view:first-child {
		padding: 20upx 60upx;
		background: #FF8A00;
		border-radius: 44upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.bottom view:last-child {
		padding: 20upx 60upx;
		background: #FF5256;
		border-radius: 44upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.imglist {
		width: 100%;
		padding: 20upx 0;
		overflow: auto;
		/* background-color: #ffffff; */
	}

	.imglist view {
		display: flex;
		justify-content: space-around;
	}

	.imglist image {
		width: 200upx;
		height: 200upx;
		border-radius: 10upx;
	}
	
	.title {
	     margin: 0 auto;
	     position: absolute;
	     width: 45%;
	 }
</style>
